<template>
  <div class="table">
    <el-row :gutter="10" class="mb8 mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Add"
               @click="handleTable"
            >添加桌号</el-button>
         </el-col>
    </el-row>

    <!-- 表格数据 -->
      <el-table v-loading="loading" :data="tableList">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="创建时间" prop="time" :show-overflow-tooltip="true" />
         <el-table-column label="桌号" prop="table" :show-overflow-tooltip="true" />
         <el-table-column label="点餐二维码" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
                <el-image style="width: 50px; height: 50px" :src="scope.row.code"  fit="cover"/>
            </template>
         </el-table-column>
      </el-table>
      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.page"
         v-model:limit="queryParams.limit"
         @pagination="getList"
        
      />

    <el-dialog
        title="菜单详情"
        v-model="dialogVisible"
        width="30%">
        <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="桌号" prop="table">
               <el-input v-model="form.table" placeholder="请输入桌号名称" />
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { Qrcode, Tablenum } from '@/api/order/index'
import { ref, onMounted, watch } from 'vue'
const { proxy } = getCurrentInstance();
const value = ref('')
const total = ref(0)
const tableList = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const orderNum = ref()
const queryParams = ref({
    page: 1,
    limit: 10,
})

const form = ref({
    table:''
});

const rules = ref({
    table: [{ required: true, message: "桌号不能为空", trigger: "blur" }],
});


onMounted(() => {
    getList()
})

// 获取桌号列表
const getList = async () => {
    const res = await Tablenum(queryParams.value)
    const { list } = res.data
    tableList.value = list 
}

// 添加桌号
const handleTable = () => {
    dialogVisible.value = true
}


/** 提交按钮 */
function submitForm() {
  proxy.$refs["roleRef"].validate(valid => {
    if (valid) {
        Qrcode(form.value).then(res => {
            const { code,msg } = res
            if(code === 200) {
                  proxy.$modal.msgSuccess(`${msg}`);
                  getList()
                  cancel()
            }else {
                proxy.$modal.msgError(`${msg}`);
                getList()
                cancel()
            }
        })
    }
  });
}
/** 取消按钮 */
function cancel() {
  dialogVisible.value = false;
  form.value.table = ''
}

</script>

<style>
.table {
    padding: 20px;
}
</style>